<!--创作控制台——右侧（数据+图表）-->
<template>
  <el-card shadow="never"
           body-style="padding: 31px 21px 81px 24px;"
           style="border-radius: 10px">
    <div class="flex-between">
      <div class="v-title">数据消费</div>
      <!-- <div>
        <el-radio-group v-model="radio1"
                        @input="change">
          <el-radio-button label="充值"></el-radio-button>
          <el-radio-button label="数据消费"></el-radio-button>

        </el-radio-group>
      </div> -->
      <el-date-picker style="width: 280px !important;"
                      v-model="dateRange"
                      type="daterange"
                      :default-time="['00:00:00', '23:59:59']"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      format="yyyy-MM-dd"
                      unlink-panels
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="selsectTime" />
    </div>
    <el-row :gutter="31">
      <el-col :sm="12"
              :xs="12"
              :md="8"
              :span="8"
              class="border-cls col-cls">
        <div class="piece-all flex">
          <el-avatar :size="40"
                     class="icon-right"
                     :src="require('@/assets/会员卡首页/组合 1058.png')" />
          <div class="flex-columns piece-text">
            <div>{{statisticsPaymentObject.shaoma_total
  }}</div>
            <span>扫码支付</span>
          </div>
        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="8"
              :span="8"
              class="border-cls col-cls">
        <div class="piece-all flex">
          <el-avatar :size="40"
                     class="icon-right"
                     :src="require('@/assets/会员卡首页/组合 1059.png')" />
          <div class="flex-columns piece-text">
            <div>{{statisticsPaymentObject.xianxia_total}}</div>
            <span>线下支付</span>
          </div>
        </div>
      </el-col>
      <el-col :sm="12"
              :xs="12"
              :md="8"
              :span="8"
              class="col-cls">
        <div class="piece-all flex">
          <el-avatar :size="40"
                     class="icon-right"
                     :src="require('@/assets/会员卡首页/组合 1060.png')" />
          <div class="flex-columns piece-text">
            <div>{{statisticsPaymentObject.zaixian_total}}</div>
            <span>在线支付</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <!--图表-->
    <v-chart ref="visitHourChart"
             style="height: 335px;margin-top: 25px;"
             :option="visitHourChartOption" />
  </el-card>
</template>
	
	<script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import VChart from 'vue-echarts';
import { echartsMixin } from '@/utils/echarts-mixin';

import { financeStatistics } from '@/api/headStatistics/index'
use([
  CanvasRenderer,
  LineChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);
import moment from 'moment';
export default {
  components: { VChart },
  mixins: [echartsMixin(['visitHourChart'])],
  name: "chart-right",
  data () {
    return {
      form: {

        time_type: 'month',
        start_time: null,
        end_time: null
      },
      // 折线图配置
      visitHourChartOption: {},
      // 日期
      dateRange: [],
      info: {}, //数据获取

      where: {},
      radio1: '充值',
      labelStatus: 0,
      currentMoment: null,
      statisticsPaymentObject: null
    };
  },
  created () {
    this.todayFn()

  },
  methods: {
    selsectTime (timeArr) {
      console.log(timeArr);
      if (timeArr) {
        this.form.start_time = timeArr[0];
        this.form.end_time = timeArr[1];
        this.form.time_type = 'month'
        this.labelStatus = null;
        this.getMatrixData(2);
      } else {
        this.form.start_time = null;
        this.form.end_time = null;

        this.labelStatus = 0;
        // this.getMatrixData(2);
        this.todayFn()
      }
    },
    // 获取当天
    todayFn () {


      this.form.time_type = 'day'

      this.dateRange = [];
      this.currentMoment = moment();
      this.currentMoment.startOf('day');

      const currentDate = this.currentMoment.format('YYYY-MM-DD');
      console.log(currentDate);

      (this.form.start_time = currentDate);
      this.form.end_time = currentDate;

      this.getMatrixData(2)

    },
    change (e) {
      console.log(e)
      if (e == '充值') {
        this.getMatrixData(1)
      } else {
        this.getMatrixData(2)
      }
    },
    // 获取 “矩阵管理” 数据
    getMatrixData (index) {


      // 商家端 “矩阵”图表数据获取
      financeStatistics({
        // 1 充值 2 消费
        type: index,
        ...this.form

      })
        .then((res) => {
          console.log('商家端 图表数据获取data======', res.data)
          this.statisticsPaymentObject = res.data
          //   var { shaoma_amount, xianxia_amount, zaixian_amount, ...rest } = res.data;
          //   console.log(...rest)
          //   // oem名称是代理的数据查询 merchant名称商家的数据查询 equipment名称设置的数据查询 merchantType名称套餐类型的数据查询
          //   var strippedObject = { shaoma_amount, xianxia_amount, zaixian_amount };

          /* “折线图” 数据 start */
          this.visitHourChartOption = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['扫码支付', '线上支付', '线下支付'],// 图例文本样式设置
              itemGap: 30, // 设置图例项之间的间隔为20像素
              textStyle: {
                color: '#999999', // 文本颜色
                fontSize: 14,  // 文本字体大小
              },
              // right: 20 // 不用 默认居中
            },

            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                  textStyle: {
                    // color: "#000000",
                    padding: 10 // 设置上边距为20
                  },
                },
                data: res.data.shaoma_amount.map((d) => d.datetime) // 底部日期展示
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '扫码支付',
                type: 'line',
                smooth: true,
                symbol: 'none',
                // 顶部线条提示颜色
                itemStyle: {
                  normal: {
                    color: '#1F78FF',
                  },
                },
                data: res.data.shaoma_amount.map((d) => d.amount)
                // data: [5,2,8,9,1,3,5]
              },
              {
                name: '线上支付',
                type: 'line',
                smooth: true,
                symbol: 'none',
                // 顶部线条提示颜色
                itemStyle: {
                  normal: {
                    color: '#FF8C14',
                  },
                },
                // data: [1,20,1,2,0,13,55]
                data: res.data.zaixian_amount.map((d) => d.amount)
              },
              {
                name: '线下支付',
                type: 'line',
                smooth: true,
                symbol: 'none',
                itemStyle: {
                  normal: {
                    color: '#0AB81C',
                  },
                },
                data: res.data.xianxia_amount.map((d) => d.amount)
                // data: [10,2,4,6,7,16,35]
              },

            ]
          };
          /*折线图 数据 end*/

        })
        .catch((e) => {
          this.$message.error(e.message);
        });

    }
  }
}
	</script>
	
	<style lang="less" scoped>
.el-avatar {
  background-color: #fff !important;
}
.v-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}
.border-cls {
  border-right: 1px solid rgb(235, 234, 234);
}
.col-cls {
  margin: 40px 0 44px;
}
.piece-all {
  padding: 0 11px;
  .icon-right {
    margin-right: 10px;
  }
  .piece-text {
    div {
      color: #000;
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 4px;
    }
    span {
      color: #999;
      font-size: 14px;
    }
  }
}
</style>
	
	